<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.68.3" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>vue跨域 &middot; 我的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0b ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/my_technology_blog/"><h1>我的博客</h1></a>
      <p class="lead">
       杨博的博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/my_technology_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2021. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>vue跨域</h1>
  <time datetime=2020-04-03T15:20:01&#43;0800 class="post-date">Fri, Apr 3, 2020</time>
  <p>vue跨域配制（第一种方法）</p>
<p>在config文件夹下的index.js中配制</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">proxyTable</span><span style="color:#f92672">:</span> {
   <span style="color:#e6db74">&#39;/api&#39;</span><span style="color:#f92672">:</span> {  <span style="color:#75715e">//使用&#34;/api&#34;来代替&#34;http://f.apiplus.c&#34; 
</span><span style="color:#75715e"></span>   <span style="color:#a6e22e">target</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;http://127.0.0.1:8000/&#39;</span>, <span style="color:#75715e">//源地址 
</span><span style="color:#75715e"></span>   <span style="color:#a6e22e">changeOrigin</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span>, <span style="color:#75715e">//改变源 
</span><span style="color:#75715e"></span>   <span style="color:#a6e22e">pathRewrite</span><span style="color:#f92672">:</span> { 
     <span style="color:#e6db74">&#39;^/api&#39;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;&#39;</span> <span style="color:#75715e">//路径重写 
</span><span style="color:#75715e"></span>     } 
 } 
}
</code></pre></div><p>跨域（第二种方法）</p>
<p>用Django的第三方包 django-cors-headers 来解决跨域问题</p>
<ul>
<li>操作步骤：</li>
</ul>
<ol>
<li>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python">pip install django<span style="color:#f92672">-</span>cors<span style="color:#f92672">-</span>headers
</code></pre></div></li>
<li>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#960050;background-color:#1e0010">在</span>settings<span style="color:#f92672">.</span>py中添加corsheaders<span style="color:#f92672">.</span>middleware<span style="color:#f92672">.</span>CorsMiddleware,
<span style="color:#960050;background-color:#1e0010">在</span>SessionMiddleware和CommonMiddleware的中间
</code></pre></div></li>
</ol>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#960050;background-color:#1e0010">在</span>settings<span style="color:#f92672">.</span>py中添加CORS_ORIGIN_ALLOW_ALL <span style="color:#f92672">=</span> True
</code></pre></div><p>axios</p>
<ul>
<li>安装 axios</li>
</ul>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#a6e22e">cnpm</span> <span style="color:#a6e22e">install</span> <span style="color:#f92672">--</span><span style="color:#a6e22e">save</span> <span style="color:#a6e22e">axios</span>
</code></pre></div><ul>
<li>配制axios</li>
</ul>
<p>在src文件下的mian.js中配制</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">axios</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;axios&#39;</span>
<span style="color:#a6e22e">Vue</span>.<span style="color:#a6e22e">prototype</span>.<span style="color:#a6e22e">axios</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">axios</span>
<span style="color:#a6e22e">axios使用</span>

<span style="color:#a6e22e">axios完整写法</span><span style="color:#960050;background-color:#1e0010">：</span>

<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">axios</span>({
  <span style="color:#a6e22e">method</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;post&#39;</span>,
  <span style="color:#a6e22e">url</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;/user/12345&#39;</span>,
  <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span> {
    <span style="color:#a6e22e">firstName</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Fred&#39;</span>,
    <span style="color:#a6e22e">lastName</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Flintstone&#39;</span>
  }
}).<span style="color:#a6e22e">then</span>((<span style="color:#a6e22e">res</span>)=&gt;{
      <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">res</span>)
}).<span style="color:#66d9ef">catch</span>((<span style="color:#a6e22e">error</span>)=&gt;{
      <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">error</span>)
 });
</code></pre></div><ul>
<li>post请求</li>
</ul>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python">this<span style="color:#f92672">.</span>axios<span style="color:#f92672">.</span>post(<span style="color:#e6db74">&#39;&#39;</span>,{})<span style="color:#f92672">.</span>then((res)<span style="color:#f92672">=&gt;</span>{})<span style="color:#f92672">.</span>catch((error)<span style="color:#f92672">=&gt;</span>{})
</code></pre></div><ul>
<li>
<p>get请求</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#a6e22e">axios</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">&#39;/user?ID=12345&#39;</span>)
.<span style="color:#a6e22e">then</span>((<span style="color:#a6e22e">response</span>)=&gt; {
  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">response</span>);
})
.<span style="color:#66d9ef">catch</span>((<span style="color:#a6e22e">error</span>)=&gt; {
  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">error</span>);
});
</code></pre></div></li>
</ul>

</div>


    </main>

    
  </body>
</html>
